// 污染等级模块
/**
 * @todo 图表绘制，数据处理，标注图例
 * @fixed title修改样式
 */
// (function() {
//     // 1.实例化对象
//     var myChart = echarts.init(document.querySelector(".grade .chart"));
 
//     // 定义数据
//     const historyData = '/';
//     const forecast = '/';
//     const symbolPass =
//         'image://';
//     const symbolUp =
//         'image://';
//     const symbolDown =
//         'image://';
//     // AQI 等级
//     const AQI_LEVELS = [
//       {
//         icon: 'k1',
//         label: '优',
//         value: 1,
//         min: 0,
//         max: 50,
//         color: '#00E500',
//       },
//       {
//         icon: 'k2',
//         label: '良',
//         value: 2,
//         min: 51,
//         max: 100,
//         color: '#FFFF00',
//       },
//       {
//         icon: 'k3',
//         label: '轻度',
//         value: 3,
//         min: 101,
//         max: 150,
//         color: '#FF7E00',
//       },
//       {
//         icon: 'k4',
//         label: '中度',
//         value: 4,
//         min: 151,
//         max: 200,
//         color: '#FE0000',
//       },
//       {
//         icon: 'k5',
//         label: '重度',
//         value: 5,
//         min: 201,
//         max: 300,
//         color: '#99004C',
//       },
//       {
//         icon: 'k6',
//         label: '严重',
//         value: 6,
//         min: 301,
//         max: '+',
//         color: '#7E0022',
//       },
//     ];
//     /**
//      * @description 获取AQI等级
//      * @params {number} value
//      */
//     //  获取AQI等级
//     const getLevel = (value) => {
//       let index = 0;
//       if (!value || value <= 50) index = 0;
//       if (value > 50 && value <= 100) index = 1;
//       if (value > 100 && value <= 150) index = 2;
//       if (value > 150 && value <= 200) index = 3;
//       if (value > 200 && value <= 300) index = 4;
//       if (value > 300 && value <= 500) index = 5;
//       return { index, ...AQI_LEVELS[index] };
//     };
//     // 获取渐变颜色范围
//     const colorRange = (startColor, endColor) => ({
//       type: 'linear',
//       x: -0.33,
//       y: 0.5,
//       colorStops: [
//           { offset: 0, color: startColor }, // 0% 处的颜色
//           { offset: 0.5, color: startColor },
//           { offset: 0.5, color: endColor },
//           { offset: 1, color: endColor }, // 100% 处的颜色
//       ],
//       global: false, // 缺省为 false
//     });
//     // 获取趋势
//     const getTrend = (history, forecast) => {
//       if (history === null || forecast === null) return '';
//       const historyLevel = getLevel(history);
//       const forecastLevel = getLevel(forecast);
//       if (historyLevel.label === forecastLevel.label) return '正确';
//       return history < forecast ? '偏高' : '偏低';
//     };
//     // 获取趋势标记符号
//     const getSymbol = (history, forecast) => {
//       const trend = getTrend(history, forecast);
//       if (trend === '正确') return symbolPass;
//       if (trend === '偏高') return symbolUp;
//       if (trend === '偏低') return symbolDown;
//       return '';
//     };
    

//     // 2.指定配置项和数据
//     var option = {
//       title: {
//         text: '污染等级 '
//       },
//       legend: {
//         show: true,
//         icon: 'circle',
//         bottom: 0,
//       },
//       tooltip: {
//         trigger: 'axis',
//         axisPointer: {
//           lineStyle: {
//             type: "solid",
//             width: 2
//           }
//         }
//       },
//       grid: {
//         left: '5%',
//         right: '4%',
//         bottom: '12%',
//         top: '12%',
//         containLabel: true,
//         show: true,
//         border: true,
//         borderColor: '#000',
//         borderWidth: 1
//       },
//       xAxis: {
//         type: 'category',
//         splitArea: {
//           show: true,
//         },
//         axisLine: {
//           show: false,
//         },
//         axisTick: { // 坐标刻线
//             show: false,
//         },
//         data: ['9/29', '9/30', '10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07', '10/08', '10/09', '10/10', '10/11', '10/12', '10/13', '10/14', '10/15', '10/16', '10/17', '10/18', '10/19', '10/20', '10/21', '10/22', '10/23', '10/24', '10/25', '10/26', '10/27', '10/28'],
//       },
//       yAxis: [
//         {
//           type: 'category',
//           data: ['预报', '', '实况监测', '', ''],
//           axisLine: {
//               show: false,
//           },
//           axisTick: {
//               show: false,
//           },
//           splitLine: {  
//             show: true,
//             lineStyle: {
//               color: '#000000',
//               width: 2
//             }
//           },
//         },
//         {
//           type: 'value',
//         },
//       ],
//       visualMap: [
//         {
//             show: false,
//             type: 'piecewise',
//             pieces: [
//                 ...AQI_LEVELS.map((v) => ({
//                     lt: v.max,
//                     gte: v.min,
//                     color: v.color,
//                 })),
//                 {
//                     value: AQI_LEVELS[0].max,
//                     color: colorRange(AQI_LEVELS[0].color, AQI_LEVELS[1].color),
//                 },
//                 {
//                     value: AQI_LEVELS[1].max,
//                     color: colorRange(AQI_LEVELS[1].color, AQI_LEVELS[2].color),
//                 },
//                 {
//                     value: AQI_LEVELS[2].max,
//                     color: colorRange(AQI_LEVELS[2].color, AQI_LEVELS[3].color),
//                 },
//                 {
//                     value: AQI_LEVELS[3].max,
//                     color: colorRange(AQI_LEVELS[3].color, AQI_LEVELS[4].color),
//                 },
//             ],
//         },
//       ],
//       series: [
//         // ...seriesDatas.map(({ name, data, color }) => ({
//         //   name,
//         //   data,
//         //   type: 'heatmap',
//         //   label: {
//         //       show: true,
//         //   },
//         //   itemStyle: {
//         //       color,
//         //       borderWidth: 5,
//         //       borderColor: '#fff',
//         //   },
//         // })),
//         // {
//         //     type: 'line',
//         //     color: '#41C15A',
//         //     markPoint: {
//         //         symbolOffset: [0, -35],
//         //         data: markPointData,
//         //     },
//         // },
//         {
//           type: 'pictorialBar',
//           symbol: '../images/tureCircle.PNG',
//           symbolSize: ['100%', '70%'],
//           symbolPosition: 'center',
//           z: 10,
//           date: [10],
//         },
//         {
//           name: "实况监测",
//           type: "bar",
//           lineStyle: {
//             normal: {
//               color: "#FEA311",
//               width: 5
//             }
//            },
//           data: [],
//         },
//         {
//           name: '预报',
//           type: 'bar',
//           data: [20,30,40]
//         },
//       ]
//     };
//     // 3.把配置项给实例对象
//     myChart.setOption(option);
//     // 4.让图表跟随屏幕自动的去适应
//     window.addEventListener('resize', function(){
//         myChart.resize()
//     });
// })();
// AQI模块
/**
 * @todo y轴加刻线；标题样式；y轴描述左移；预测值进行修改
 */
(function() {
    // 1.实例化对象
    var myChart = echarts.init(document.querySelector(".aqi .chart"));
    // 2.指定配置项和数据
    var option = {
      title: {
        text: 'AQI'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            type: "solid",
            width: 2
          }
        }
      },
      legend: {
        data: ['实况监测', '预报'],
      },
      grid: {
        left: '5%',
        right: '4%',
        bottom: '20%',
        top: '20%',
        containLabel: true,
        show: true,
      },
      dataZoom: [
        {
          show: true,
          realtime: true,
          start: 0,
          end: 100,
          xAxisIndex: [0, 1]
        },
      ],
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['09/29', '09/30', '10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07', '10/08', '10/09', '10/10', '10/11', '10/12', '10/13', '10/14', '10/15', '10/16', '10/17', '10/18', '10/19', '10/20', '10/21', '10/22', '10/23', '10/24', '10/25', '10/26', '10/27', '10/28']
      },
      yAxis: {
        name: '单位：无量纲',
        type: 'value',
        splitArea: {
          show: true
        },
        nameTextStyle: {
          align: 'center',
          lineHeight: 50
        },
        axisTick: {
          show: true,
        },
        nameLocation: 'center',
        date: [0, 30, 60, 90, 120, 150]
      },
      series: [
        {
          name: "实况监测",
          type: "line",
          lineStyle: {
            normal: {
              color: "#FEA311",
              width: 3
            }
           },
          // 设置拐点 小圆点
          symbol: "circle",
          // 拐点大小
          symbolSize: 10,
          // 设置拐点颜色以及边框
           itemStyle: {
              color: '#FEA311',
              borderColor: "rgba(221, 220, 107, .1)",
              borderWidth: 3
          },
          // 开始不显示拐点， 鼠标经过显示
          showSymbol: false,
          smooth: true,
          data: [20, 82, 91, , 90, 30, 10, 120, 132, 101, 134, , 30, 10, 120, 132, 101, 134, 90, 30, 10, 120, , 101, 134, 90, 30, 10,30, 40],
        },
        {
          type: 'custom',
          name: '预报',
          itemStyle: {
            color: 'green',
            borderWidth: 5
          },
          renderItem: function (params, api) {
            var categoryIndex = api.value(0);
            var start = api.coord([categoryIndex, api.value(1)]);
            var end = api.coord([categoryIndex, api.value(2)]);
            var height = 20;
            var style = api.style({
              stroke: api.visual('color'),
              fill: undefined
            });
            return {
              type: 'group',
              children: [
                {
                  type: 'circle',
                  transition: ['shape'],
                  shape: {
                    x1: start[0] - height,
                    y1: start[1],
                    x2: start[0] + height,
                    y2: start[1]
                  },
                  style: style
                },
                {
                  type: 'line',
                  transition: ['shape'],
                  shape: {
                      x1: start[0],
                      y1: start[1],
                      x2: end[0],
                      y2: end[1]
                  },
                  style: style
                },
                {
                  type: 'circle',
                  transition: ['shape'],
                  shape: {
                    x1: end[0] - height,
                    y1: end[1],
                    x2: end[0] + height,
                    y2: end[1]
                  },
                  style: style
                }
              ]
            };
          },
          encode: {
            x: 0,
            y: [1, 2]
          },
          z: 100,
          data: [[0,35,80], [1,32,70], [2,,], [3,70,130], [4,35,60], [5,38,65], [6,,], [7,,], [8,55,95], [9,,], [10,35,65], [11,25,50], [12,45,75], [13,48,80], [14,65,112], [15,56,88], [16,36,64], [17,42,58], [18,31,58], [19,61,103], [20,45,78], [21,57,95], [22,34,72], [23,38,79], [24,62,110], [25,60,105], [26,72,109], [27,48,82], [28,64,108], [29,66,115]]
        }
      ]
    };
    // 3.把配置项给实例对象
    myChart.setOption(option);
    // 4.让图表跟随屏幕自动的去适应
    window.addEventListener('resize', function(){
        myChart.resize()
    });
})();
// 首要污染物模块
/**
 * @todo 图表绘制，数据处理，标注图例
 * @fixed title修改样式
 */
(function() {
    // 1.实例化对象
    var myChart = echarts.init(document.querySelector(".paimary .chart"));
    // 2.指定配置项和数据
    var option = {
      title: {
        text: '首要污染物'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            type: "solid",
            width: 2
          }
        }
      },
      legend: {},
      grid: {
        left: '5%',
        right: '4%',
        bottom: '12%',
        top: '12%',
        containLabel: true,
        show: true,
        border: true,
        borderColor: '#000',
        borderWidth: 1
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLine: {
          show: false,
        },
        axisTick: {
            show: true,
        },
        data: ['9/29', '9/30', '10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07', '10/08', '10/09', '10/10', '10/11', '10/12', '10/13', '10/14', '10/15', '10/16', '10/17', '10/18', '10/19', '10/20', '10/21', '10/22', '10/23', '10/24', '10/25', '10/26', '10/27', '10/28'],
      },
      yAxis: [
        {
          type: 'category',
          data: ['预报', '', '实况监测', '', ''],
          axisLine: {
              show: false,
          },
          axisTick: {
              show: false,
          },
          splitLine: {  
            show:true,
            lineStyle:{
              color:'#000000',
              width: 2
            }
          },
        },
        {
          type: 'value',
        },
      ],
      series: [
        {
          name: "PM2.5",
          type: "bar",
          symbol: "rect",
          color: '#FF6B3D',
          data: [,,,,,,,,,,,,,,1,,,,,1,1,,,1,1,,1],
        },
        {
          name: "PM10",
          type: "bar",
          symbol: "rect",
          color: '#606680',
          data: [,,1,1,1,,,,,,1,,,,,,1,1,,,,1,,,,,],
        },
        {
          name: "C3_8h",
          type: "bar",
          symbol: "rect",
          color: '#209ED1',
          data: [1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,],
        },
        {
          name: "NO2",
          type: "bar",
          symbol: "rect",
          color: '#946DFE',
          data: [,,,,,,,,,,,,,1,,,,,,,,1,1,,,1,1,],
        },
        {
          name: "CO",
          type: "bar",
          symbol: "rect",
          color: '#054987',
          data: [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,],
        },
        {
          name: "SO2",
          type: "bar",
          symbol: "rect",
          color: '#B41215',
          data: [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,],
        },
        {
          name: "无",
          type: "bar",
          symbol: "rect",
          color: '#18CECC',
          data: [,,,,,1,,1,,1,,1,,,1,1,1,,,,,,,,,,,,],
        },
      ]
    };
    // 3.把配置项给实例对象
    myChart.setOption(option);
    // 4.让图表跟随屏幕自动的去适应
    window.addEventListener('resize', function(){
        myChart.resize()
    });
})();
// 预测等级模块1
/**
 * @todo 饼图下面加文字；
 * @fixme 图标位置调整
 */
(function() {
    // 1.实例化对象
    var myChart = echarts.init(document.querySelector(".pieGrade .chart"));
    // 2.指定配置项和数据
    var option = {
        tooltip: {
            trigger: 'item'
        },
        color: ["#38A2DC", "#4CE54C", "#FEDD5C"],
        legend: {
          formatter: function (name) {
              return  name.slice(0,2);
          },
            orient: 'horizontal',
            left: 'center'
        },
        label: {
            formatter: '{b}',
            color: '#000000',
        },
        series: [
            {
                name: '准确等级',
                type: 'pie',
                radius: '50%',
                data: [
                { value: 7.69, name: '偏低（7.69%）' },
                { value: 84.62, name: '准确（84.62%）' },
                { value: 7.69, name: '偏高（7.69%）' },
                ],
                emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
                }
            }
        ]
    };
    // 3.把配置项给实例对象
    myChart.setOption(option);
    // 4.让图表跟随屏幕自动的去适应
    window.addEventListener('resize', function(){
        myChart.resize()
    });
})();
// 预测等级模块2
/**
 * @todo 饼图下面加文字；
 * @fixme 图标位置调整
 */
(function() {
    // 1.实例化对象
    var myChart = echarts.init(document.querySelector(".pieApi .chart"));
    // 2.指定配置项和数据
    var option = {
        tooltip: {
            trigger: 'item'
        },
        color: ["#38A2DC", "#4CE54C", "#FEDD5C"],
        legend: {
          formatter: function (name) {
              return  name.slice(0,2);
          },
            orient: 'horizontal',
            left: 'center'
        },
        label: {
            formatter: '{b}',
            color: '#000000',
        },
        series: [
            {
                name: '准确等级',
                type: 'pie',
                radius: '50%',
                data: [
                { value: 23.08, name: '偏低（23.08%）' },
                { value: 65.38, name: '准确（65.38%）' },
                { value: 11.54, name: '偏高（11.54%）' },
                ],
                emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
                }
            }
        ]
    };
    // 3.把配置项给实例对象
    myChart.setOption(option);
    // 4.让图表跟随屏幕自动的去适应
    window.addEventListener('resize', function(){
        myChart.resize()
    });
})();
// 预测等级模块3
/**
 * @todo 饼图下面加文字；
 * @fixme 图标位置调整
 */
(function() {
    // 1.实例化对象
    var myChart = echarts.init(document.querySelector(".piePaimary .chart"));
    // 2.指定配置项和数据
    var option = {
        tooltip: {
            trigger: 'item'
        },
        color: ["#FF9F7F", "#4CE54C"],
        legend: {
          formatter: function (name) {
              return  name.slice(0,2);
          },
            orient: 'horizontal',
            left: 'center'
        },
        label: {
            formatter: '{b}',
            color: '#000000',
        },
        series: [
            {
                name: '准确等级',
                type: 'pie',
                radius: '50%',
                data: [
                { value: 57.89, name: '错误（57.89%）' },
                { value: 42.11, name: '准确（42.11%）' },
                ],
                emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
                }
            }
        ]
    };
    // 3.把配置项给实例对象
    myChart.setOption(option);
    // 4.让图表跟随屏幕自动的去适应
    window.addEventListener('resize', function(){
        myChart.resize()
    });
})();